<!-- 后端代码生成页面 -->
<template>
  <div>
    <el-form :model="generator" label-width="150px">
      <!-- 生成文件路径区域 -->
      <el-form-item label="生成文件路径">
        <el-input
          v-model="generator.path"
          placeholder="F:\zhixi\zhixi-admin\src\main\java"
        ></el-input>
      </el-form-item>
      <!-- 作者区域 -->
      <el-form-item label="作者">
        <el-input v-model="generator.author" placeholder="zhixi"></el-input>
      </el-form-item>
      <!-- 主键自增策略区域 -->
      <el-form-item label="主键自增策略">
        <el-input v-model="generator.idType" placeholder="5"></el-input>
      </el-form-item>
      <!-- 开启swagger2模式区域 -->
      <el-form-item label="开启swagger2模式">
        <el-switch
          v-model="generator.swagger2"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <!-- 数据库IP地址区域 -->
      <el-form-item label="数据库IP地址">
        <el-input
          v-model="generator.addressIP"
          placeholder="localhost"
        ></el-input>
      </el-form-item>
      <!-- 数据库端口号区域 -->
      <el-form-item label="数据库端口号">
        <el-input v-model="generator.port" placeholder="3306"></el-input>
      </el-form-item>
      <!-- 数据库名称区域 -->
      <el-form-item label="数据库名称">
        <el-input
          v-model="generator.dataSourceName"
          placeholder="zhixi"
        ></el-input>
      </el-form-item>
      <!-- MySQL数据源区域 -->
      <el-form-item label="数据库驱动">
        <el-select v-model="generator.driverName" placeholder="选择数据库驱动">
          <el-option
            v-for="item in driverName"
            :key="item.driver"
            :label="item.driver"
            :value="item.driver"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据库账号">
        <el-input v-model="generator.username" placeholder="root"></el-input>
      </el-form-item>
      <el-form-item label="数据库密码">
        <el-input v-model="generator.password" placeholder="3333"></el-input>
      </el-form-item>
      <!-- 模块名区域 -->
      <el-form-item label="模块名">
        <el-input
          v-model="generator.moduleName"
          placeholder="包名.模块名 可以为空"
        ></el-input>
      </el-form-item>
      <!-- 包名区域 -->
      <el-form-item label="包名">
        <el-input v-model="generator.parent" placeholder="com.zhixi"></el-input>
      </el-form-item>
      <!-- 表名称区域 -->
      <el-form-item label="数据库表名">
                <span v-for="item in generator.include">
        <div class="mysql_table">{{item}}</div>
      </span>
        <!-- 添加数据库表区域 -->
        <el-button
        type="success"
        class="el-icon-download"
        @click="saveTable">
          <span class="icon_border">添加数据库表</span>
        </el-button>
        <!-- 删除数据库表区域 -->
        <el-popover
          placement="top-end"
          width="400"
          trigger="click">
            <el-card class="box-card">
              <div v-for="(item,index) in generator.include" :key="index">
                <span>{{'已添加数据库表名：' + item }}</span>
                <el-button type="danger" @click="deleteTable(index)"><span>删除</span></el-button>
              </div>
            </el-card>
          <el-button type="danger" class="el-icon-download" slot="reference">
            <span class="icon_border">删除数据库表</span>
          </el-button>
        </el-popover>
      </el-form-item>
    </el-form>
      <!-- 生成按钮 -->
      <el-button
        type="primary"
        class="el-icon-download btn"
        @click="generatorCode"
        ><span class="icon_border">生成</span></el-button
      >
    </el-form>
  </div>
</template>

<script>
import generatorApi from "@/api/generator/generator";

export default {
  data() {
    return {
      // 数据库驱动
      driverName: [
        { driver: "com.mysql.cj.jdbc.Driver" },
        { driver: "com.mysql.jdbc.Driver" },
      ],
      // 代码生成信息
      generator: {
        path: "F:\\ProductionProjects\\zhixi\\zhixi-admin\\src\\main\\java", // 生成的路径 到全路径~src\\main\\java下 例如F:\zhixi\zhixi-admin\src\main\java
        author: "zhixi",
        idType: "5", // 主键自增策略
        swagger2: true,
        addressIP: "localhost",
        port: "3306",
        dataSourceName: "zhixi", // 数据库名
        driverName: "com.mysql.cj.jdbc.Driver",
        username: "root",
        password: "3333",
        moduleName: "",
        parent: "com.zhixi",
        include: [], // 表名
      },
    };
  },
  methods: {
    // 添加生成数据库表
    saveTable() {
      this.$prompt("请输入要生成的表名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.generator.include.push(value);
        })
        .catch(() => {});
    },
    // 删除生成数据库表
    deleteTable(index) {
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.generator.include.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    // 调用生成代码接口
    generatorCode() {
      console.log("生成代码");
      generatorApi.generator(this.generator).then((response) => {
        if (response.code !== 200) {
          return new Error("代码生成失败");
        }
        this.$message({
          type: "success",
          message: "代码生成成功!",
        });
      });
    },
  },
};
</script>
<style scoped>
.mysql_table {
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #009900;
}
.icon_border {
  padding-left: 10px;
}
.btn {
  margin-left: 50px;
}
</style>